<!-- 柱状图 -->
<template>
  <div class="wrap">
    <el-card class="box-card" shadow='never' style="height:calc(50vh - 102px);border-radius:6px">
      <div>
        <div class="content" style="height:calc(50vh - 102px)">
          <div ref="barchart" id="barchart" :style="{height:height,width:width}"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
	props: {
		title: {
      type: String,
      default: '显示日统计趋势'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: 'calc(50vh - 102px)'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
	watch: {
    chartData: {
      deep: true,
      handler(val) {
				if(!val || val?.series?.length === 0){
					const dom = document.getElementById('barchart');
					dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
					dom.removeAttribute('_echarts_instance_');
				}else{
					this.setOptions(val)
				}
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
		if(!this.chartData || this.chartData?.series?.length === 0){
			const dom = document.getElementById('barchart');
			dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
			dom.removeAttribute('_echarts_instance_');
		}else{
			this.setOptions(this.chartData)
		}
  },
	methods: {
		setOptions(chartData){
      this.myChart = this.$echarts.init(this.$refs.barchart, 'macarons')
			this.myChart.setOption({
				xAxis: {
					type: 'category',
          axisLabel: {
            interval: 0
            // rotate: 40 // 如果 x 轴标签比较长，可以通过旋转来展示
          },
					data: chartData.xAxis
				},
				yAxis: {
					type: 'value'
				},
				tooltip: {
          trigger: "item",
					backgroundColor: '#fff',
					textStyle:{
            color:'#000'
          }
        },
				series: [
					{
						data: chartData.series,
						type: 'bar',
						barWidth : 50,
            label: {
                show: true, // 显示标签
                position: 'top', // 标签位置
                color: '#188df0' 
            },
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#83bff6' },
								{ offset: 0.5, color: '#188df0' },
								{ offset: 1, color: '#188df0' }
							])
						}
					}
				]
			})
      this.myChart.off('click');
			this.myChart.on('click',  (params) => {
				this.$emit('barclick', params.name, this.title)
			});
		}
	}
};
</script>
<style scoped>
.echarts_tip{
	position:absolute;
	border-radius:5px;
	background:rgba(0,0,0,.5);
	padding:10px 20px;
}
.wrap {
    height: calc(50vh - 40px);
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    padding: 10px 24px 14px;
    margin: 0 auto;
}
::v-deep .el-card{
  border: none;
}
.wrap .title{
    color: #459ffc;
    font-size: 16px;
}
</style>